<template>
    <div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" :append-to-body="true"
            v-loading="loading">
            <div>
                <create-sections title="基本信息">
                    <el-form ref="rpForm" :model="form" :rules="fieldRules" :inline="true">
                        <div style="display: flex;">
                            <div class="div-flex">
                                <el-form-item label="地址类型" style="width:100%;">
                                    <el-select v-model="form.addressType" placeholder="请选择" style="width:90%">
                                        <el-option v-for="item in fieldList" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>

                            <div style="flex:1">
                                <el-form-item label=" 邮政编码" style="width:100%">
                                    <el-input v-model="form.postalCode"></el-input>
                                </el-form-item>
                            </div>
                        </div>


                        <div style="display: flex;">
                            <div class="div-flex">
                                <el-form-item label="联系人" style="width:100%">
                                    <el-input v-model="form.contactsName"></el-input>
                                </el-form-item>
                            </div>

                            <div style="flex:1">
                                <el-form-item label="联系方式" style="width:100%">
                                    <el-input v-model="form.telephone"></el-input>
                                </el-form-item>
                            </div>
                        </div>

                        <div style="display: flex;">
                            <div class="div-flex">
                                <el-form-item label="地址" style="width:100%">
                                    <el-input v-model="form.address"></el-input>
                                </el-form-item>
                            </div>
                            <div style="flex:1">
                                <el-form-item label="备注" style="width:100%">
                                    <el-input v-model="form.remark"></el-input>
                                </el-form-item>
                            </div>
                        </div>

                    </el-form>
                </create-sections>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="btnSubmit">保 存</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import CreateSections from "@/components/CreateSections";
import FormItemMore from '@/components/busComponents/NewComponents/BusForm/FormItemMore'
import { isEmpty } from '@/utils/types'
import CustomFieldsMixin from '@/mixins/CustomFields'
import customerRelation from '@/components/customerManage/customerRelation.vue'
import { saveAddress, updateAddress } from "@/api/customer/customer";

export default {
    name: "createAddress",
    components: { CreateSections, FormItemMore, customerRelation },
    mixins: [CustomFieldsMixin],
    props: {
        dialogTitle: String,
        customerId: String,
    },
    data () {
        return {
            dialogVisible: false,
            loading: false,
            fieldRules: {},
            form: {
                address: "",
                addressType: '',
                contactsName: "",
                customerId: '',
                postalCode: '',
                remark: '',
                telephone: '',
                isMain: 0,
                status: 1,
            },
            row: undefined,
            fieldList: [{ label: '办公地址', value: 1 },
            { label: '仓储地址', value: 2 },
            { label: '注册地址', value: 3 },
            { label: '门店地址', value: 4 },
            { label: '家庭地址', value: 5 },
            { label: '其它', value: 6 }],
        };
    },
    watch: {
        list (newVal, oldVal) {

        }
    },
    methods: {
        showFun (row) {
            this.row = row;
            if(this.row){
                this.form = row;
            }
            this.dialogVisible = true;
        },
        closeFun () {
            this.dialogVisible = false;
        },
        btnSubmit () {
            this.loading = true;
            this.form.customerId = this.customerId;
            if (this.id) {
                this.form.id = this.id;
                saveAddress(this.form).then(res => {
                    this.$emit("RefreshAddress");
                    this.loading = false;
                    this.closeFun();
                }).catch(error => {
                    this.loading = false;

                });


            } else {
                saveAddress(this.form).then(res => {
                    this.$emit("RefreshAddress");
                    this.loading = false;
                    this.closeFun();
                }).catch(error => {
                    this.loading = false;

                });

            }
        },
    },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/custom-element.scss";

.div-flex {
    flex: 1;
    margin-right: 22px;
}

.add-customer {
    font-size: 16px;
    font-weight: 400;
    color: #204EC4;
    line-height: 36px;
    position: absolute;
    top: 0;
    right: 0;

}
</style>